<template>
    <div id="AccountManage">
        <el-row  style="margin-bottom: 20px;">
            <el-col :span="1" >
                <el-button type="primary" @click="addNewAccount">新增账户</el-button>
            </el-col>
        </el-row>
         <el-table
            :data="roleList"
            border
            style="width: 100%"
            :row-class-name="tableRowClassName">
            <el-table-column
            prop="accountName"
            label="账户名称"
            width="180">
            </el-table-column>
            <el-table-column
            prop="createBy"
            label="创建人"
            width="180">
            </el-table-column>
             <el-table-column
            prop="emailAddress"
            label="邮箱地址"
            width="180">
            </el-table-column>
             <el-table-column
            prop="nickName"
            label="昵称"
            width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="success" plain
                    @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
            </template>
    </el-table-column>
        </el-table>
         <el-pagination
                background
                layout="prev, pager, next"
                :total="totalRecord"
                @current-change="currentChange">
        </el-pagination>
            <router-view></router-view>
    </div>
</template>

<script>
import qs from 'qs';
import accountEditView from './AccountEditView'
export default {
    data() {
      return {
        roleList: [],
        dialogVisible: false, //控制弹框是否显示
        accountInfo: {}, //账户信息
        totalRecord: 1
      }
    },
    components: {accountEditView},
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleEdit(index,row){
          this.$router.push({name:'AccountEditView',params: {accountId: row.accountId}})
      },
      handleDelete(index,row){
        //   /backstage/account/delete
            var action = ()=>{
                var deleteURL = window.baseURL+"/backstage/account/delete";
                return this.$http.post(deleteURL,qs.stringify({accountId:row.accountId,token: this.$token}))
                .then((response)=>{
                    if(response.data.success){
                        this.loadData(1);
                    }
                })
                .catch((error)=>{
                })
            }
            this.operatorConfirm(action,'删除账号');
           
      },
      handleDetail(index,row){
        //   跳转到详情页面 
        if(localStorage){
            localStorage.setItem("accountId",row.accountId)
        }
        this.$router.push({name:'AccountDetail',params: {accountId: row.accountId}});

      },
      hideDialog(){
          this.dialogVisible = false;
      },
      currentChange(value){
          this.loadData(value);
      },
      addNewAccount(){
        //新增账号
        this.$router.push({name: 'AddAccountView'})
      },
      loadData(pageNum){
            var _this = this;
            this.$http.get(window.baseURL+"/backstage/account/findByPage?token="+this.$token+'&pageNum='+pageNum+'&pageSize=20')
            .then(function(response){
                response = response.data;
                if(response){
                    _this.roleList = response.data.list.results;
                    _this.totalRecord = response.data.list.totalRecord;   
                }
            })
            .catch(function(error){
            })
        }
    },
    created(){
        this.loadData(1);
    },
    beforeRouteUpdate(to,from,next){
        if(to.name === "账户管理"){
            this.loadData(1);
        }
        next();
    }
}
</script>

<style lang="scss" scoped>
 .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  #AccountManage {
    width: 100%;
    padding: 40px;
    box-sizing: border-box;
    position: absolute;

  }
</style>
